<template>
  <div class="table-ctrl-body">
    <!--表格组-->
      <div class="table-ctrl" style="padding-bottom: 30px;">
        <!--表格头-->
        <div class="table-header">
          <table class="table-default">
            <thead>
            <tr>
              <th v-for="item in headerTable" :key="item.name" :class="{'index':item.name == '序号'}">
                {{item.name}}
              </th>
            </tr>
            </thead>
          </table>
        </div>
        <!--表格中部-->
        <div class="table-overflowX">
          <table class="table-default">
            <tbody>
              <!-- <tr>
                <th v-for="item in headerTable" :key="item.name" >
                  {{item.name}}
                </th>
              </tr> -->
              <tr v-for="(trs,index) in tableData"
                :key="trs.id"
                @click="clickActive(trs,index)"
                class="tr-hover"
                :class="{'active': checkedAry.indexOf(index) > -1 }" >
                <td :class="{ 'img-checked': checkedAry.indexOf(index) > -1 }" class="index">
                  {{ index + 1 }}
                </td>
                <td>
                  {{ trs.name }}
                </td>
                <td>
                  {{ trs.url }}
                </td>
                <td>
                  {{ lastTime(trs) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    <!--表格组End-->
  </div>
</template>

<script>
export default {
  name: 'tableMate',
  props: {
    headerTable: Array,
    tableData: Array,
    clearCheckedAry: Boolean
  },
  data() {
    return {
      checkedAry: [], //存放点击元素
      checkedDataAry: [], //存放点击元素的数据
      trueSrc: require('@/assets/true.png'),  //选中显示的图片
    }
  },
  methods: {
    //如果有修改时间就显示修改时间，没有就显示创建时间
    lastTime (trs){
      let time = '';
      if(trs.updateTime != null) {
        time = trs.updateTime;
      }
      else {
        time = trs.createTime;
      }
      if(time != null) {
        time = time.replace('T',' ').substring(19, -1);
      }
      return time//转换成友好的形式
    },
    //点击一列触发函数
    clickActive(trs, index) {
      let Onw = this.checkedAry.indexOf(index)
      if(Onw > -1) {  //index有包含在选中的数组中，从选中的数组中删除index，从数据数组中删除对应数据
        this.checkedAry.splice(Onw, 1)
        this.checkedDataAry = this.delArray(this.checkedDataAry, trs, 'id')
      }
      else {
        this.checkedAry.push(index)
        this.checkedDataAry.push(trs)
      }
      if(this.checkedAry.length > 0){ //代表有选择,然后只能选择最后一项
        this.checkedAry = [this.checkedAry.pop()];
        this.checkedDataAry =  [this.checkedDataAry.pop()];
      }
      this.$emit('checkedAryFn', this.checkedDataAry)
      //console.log(this.checkedDataAry)
    },
    /* * JSON数组删除对应项
    * @param: [array] json Array
    * @param: [string] 唯一的key名，根据此键名的值进行删除
    * @result: 删掉对应属性值后的数组
    */
    delArray(array, obj, key) {
      var result = [];
      for(var i = 0; i < array.length; i++){
        if( array[i][key] != obj[key] ) {
          result.push(array[i]);
        }
      }
      return result;
    }
  },
  watch: {
    clearCheckedAry() {
      this.checkedAry = [];
      this.checkedDataAry = [];
    }
  }
}
</script>

<style scoped>
  .index{
    width: 51px;
  }
</style>

